<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input id="url" type="text" placeholder="请输入url" />
    <button onclick="getSrt()">获取</button>
    <div>
      <textarea name="" id="res" cols="300" rows="101"></textarea>
    </div>
  </body>
  <style>
    #url{
      width: 800px;
      border-color:skyblue ;
      height: 45px;
    }
    button{
      height: 40px;
      width: 80px;
      background-color: skyblue;
      border: none;
      margin-bottom: 10px;
    }
  </style>
  <script>
    document.getElementById('res').style.display = "none"
    function getSrt() {
      console.log(123);
      var input = document.getElementById("url");
      let url = input.value;
      console.log(url);
      var httpRequest = new XMLHttpRequest(); //第一步：建立所需的对象
      httpRequest.open("GET", url, true); //第二步：打开连接  将请求参数写在url中  ps:"http://localhost:8080/rest/xxx"
      httpRequest.send(); //第三步：发送请求  将请求参数写在URL中
     
      var data = "";
      function getTime(seconds) {
        let h = parseInt(seconds / 60 / 60) % 24;
        let m = parseInt(seconds / 60) % 60;
        let s = parseInt(seconds) % 60;
        let d = seconds - parseInt(seconds);

        return `${h < 10 ? "0" + h : h}:${m < 10 ? "0" + m : m}:${
          s < 10 ? "0" + s : s
        },${d.toFixed(3) * 1000}`;
      }
       /**
       * 获取数据后的处理程序
       */
      httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
          var json = httpRequest.responseText; //获取到json字符串，还需解析
          data = json.toString();
          // console.log(json);
          var res = "";
          srt_list = JSON.parse(data).body;
          for (const srt in srt_list) {
            d = srt_list[srt];
            num = d.sid;
            start = d.from;
            end = d.to;
            msg = d.content;
            res += `${num}\n${getTime(start)} --> ${getTime(end)}\n${msg}\n\n`;
          }
          document.getElementById("res").style.display = ''
          document.getElementById("res").textContent = res;
        }
      };
    }
  </script>
</html>
